<template>
  <footer class="anime-footer">
    <div class="footer-content">
      <div class="footer-links">
        <el-link
            v-for="link in footerLinks"
            :key="link.text"
            :href="link.url"
            :icon="link.icon"
            target="_blank"
        >
          {{ link.text }}
        </el-link>
      </div>

      <div class="footer-info">
        <div class="anime-character">
          <img
              src="@/assets/image/lbt1.png"
              alt="二次元角色"
              class="character-img"
              @mouseenter="playCharacterAnimation"
          />
        </div>
        <div class="copyright">
          © 2025 二次元管理后台 v1.0.0<br>
          Made with <i class="fa fa-hammer"></i> by 动漫爱好者
        </div>
      </div>

      <div class="theme-switcher">
        <el-tooltip content="切换主题" placement="top">
          <el-button
              circle
              size="small"
              @click="toggleTheme"
          >
            <el-icon :color="themeIconColor"><component :is="themeIcon" /></el-icon>
          </el-button>
        </el-tooltip>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { ref, computed } from 'vue'
import {
  Sunny,
  Moon,
  Link,
  QuestionFilled,
  Document
} from '@element-plus/icons-vue'

// 主题切换逻辑
const currentTheme = ref('light')
const themeIcon = computed(() => currentTheme.value === 'light' ? Moon : Sunny)
const themeIconColor = computed(() => currentTheme.value === 'light' ? '#409EFF' : '#FFD700')

const toggleTheme = () => {
  currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light'
  document.documentElement.setAttribute('data-theme', currentTheme.value)
}

// 页脚链接
const footerLinks = ref([
  { text: '项目文档', icon: Document, url: '#' },
  { text: 'GitHub', icon: Document, url: 'https://github.com' },
  { text: '帮助中心', icon: QuestionFilled, url: '#' },
  { text: '友情链接', icon: Link, url: '#' }
])

// 角色动画效果
const playCharacterAnimation = () => {
  const character = document.querySelector('.character-img')
  character.style.transform = 'translateY(-10px) rotate(5deg)'
  setTimeout(() => {
    character.style.transform = 'none'
  }, 500)
}
</script>

<style scoped>
.anime-footer {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 15px 20px;
  border-top: 1px solid #eee;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-links {
  display: flex;
  gap: 15px;
}

.footer-links .el-link {
  font-size: 14px;
}

.footer-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.anime-character {
  width: 60px;
  height: 60px;
}

.character-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all 0.3s ease;
  cursor: pointer;
}

.copyright {
  font-size: 12px;
  color: #666;
  text-align: center;
  line-height: 1.5;
}

.theme-switcher {
  margin-left: 20px;
}

/* 暗黑模式适配 */
[data-theme="dark"] .anime-footer {
  background-color: rgba(30, 30, 30, 0.9);
  border-top-color: #444;
}

[data-theme="dark"] .copyright {
  color: #aaa;
}
</style>
